<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象轮播图</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
    <div class="box">
        <ul id="ul">
            <li><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/1.jpg"/></li>
            <li><img src="img/1.jpg"/></li>
        </ul>
        <ol id="ol">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </ol>
        <a href="javascript:;" class="iconfont left">&#xe611;</a>
        <a href="javascript:;" class="iconfont right">&#xe610;</a>
    </div>
</body>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
    var obj = document.getElementById('ul');
    var indexA = document.getElementById('ol').getElementsByTagName('a');
    new Carousel(obj , indexA);
</script>
</html>